<template>
    <div style="display: flex;">
        <div class="map" id="map"></div>
        <div>
            <div class="tabTime-style" :class="[activeIndex==index? 'activeTab-style' :'']" v-for="(item,index) in point24" :key="index"  @click="activeTab(item,index)">{{item }}</div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import jilin from "@/json/jilin.json";
import { getPoint, get24Point } from "@/utils/morePoint";
export default {
  data() {
    return {
      activeIndex: 0,
      //天气图标图片
      weatherMap: {
        qing: require("@/assets/images/tq__1.jpg"),
        qingZhuanDuoyun: require("@/assets/images/tq__2.jpg"),
        zhongyu: require("@/assets/images/tq__3.jpg"),
        qingZhuanZhongyu: require("@/assets/images/tq__4.jpg"),
        zhongxue: require("@/assets/images/tq__5.jpg"),
        leidian: require("@/assets/images/tq__6.jpg"),
        yin: require("@/assets/images/tq__7.jpg"),
        daxue: require("@/assets/images/tq__8.jpg"),
        qingZhuanYin: require("@/assets/images/tq__9.jpg")
      },
      //吉林省下所有市的天气数据
      testData: [
        {
          name: "长春市",
          value: "qing",
          min: "10",
          max: "20",
          weather: "晴"
        },
        {
          name: "吉林市",
          value: "qingZhuanDuoyun",
          min: "11",
          max: "15",
          weather: "晴转多云"
        },
        {
          name: "通化市",
          value: "zhongyu",
          min: "8",
          max: "12",
          weather: "中雨"
        },
        {
          name: "四平市",
          value: "qingZhuanZhongyu",
          min: "9",
          max: "19",
          weather: "晴转中雨"
        },
        {
          name: "白山市",
          value: "zhongxue",
          min: "-15",
          max: "-5",
          weather: "中雪"
        },
        {
          name: "辽源市",
          value: "leidian",
          min: "13",
          max: "17",
          weather: "雷电"
        },
        {
          name: "白城市",
          value: "yin",
          min: "4",
          max: "7",
          weather: "阴"
        },
        {
          name: "延边朝鲜族自治州",
          value: "daxue",
          min: "-22",
          max: "-12",
          weather: "大雪"
        },
        {
          name: "松原市",
          value: "qingZhuanYin",
          min: "10",
          max: "20",
          weather: "晴转多云"
        }
      ]
    };
  },
  created() {
    this.point24 = get24Point();
  },
  mounted() {
    this.drawMap();
  },
  methods: {
    //点击时间
    activeTab(item, index) {
      console.log(item);
      this.activeIndex = index;
    },
    drawMap() {
      // 判断地图是否渲染
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      // 如果渲染则清空地图
      if (myChart != null) {
        myChart.dispose();
      }
      // 初始化地图
      myChart = echarts.init(document.getElementById("map"));

      echarts.registerMap("jilin", jilin);

      //标签样式，这里是温度及省份名称的样式
      let rich = {
        max: {
          color: "#fff",
          backgroundColor: "#b5d39c",
          width: 44,
          height: 26
        },
        min: {
          color: "#fff",
          backgroundColor: "#e1eccd",
          width: 44,
          height: 26
        },
        name: {
          color: "#F56C6C",
          height: 32
        }
      };

      //根据测试数据，来定义不同天气的图标样式
      const weatherMap = this.weatherMap;
      let tempData = this.testData;
      tempData.forEach(item => {
        item.weatherImg = weatherMap[item.value];
        rich[item.value] = {
          height: 26,
          width: 26,
          backgroundColor: {
            image: weatherMap[item.value]
          }
        };
      });

      var option = {
        series: [
          {
            type: "map",
           
            zoom: 1.2,
            map: "jilin",
            label: {
                color:'#ccc',
              show: true,
              //这里使用formatter回调函数的形式来定义标签的显示样式
              formatter: function(params) {
                return `{${params.data.value}|}  {min|${
                  params.data.min
                }℃}  {max|${params.data.max}℃}\n{name|${params.name}}`;
              },
              // 把上面定义好的样式赋值到这里来
              rich: rich,
             
            },
            //测试数据
            data: tempData,
            itemStyle: {
              // areaColor:'#61bf59',  //地图区域色
              // shadowColor:'#61bf59',
              borderColor: "#61bf59", //边框色
              borderWidth: 1,

              // 这个是鼠标移上去就会选中的样式，鼠标mouseover
              emphasis: {
               
                borderWidth: 1,
                borderColor: "#61bf59",
                areaColor: "#6666ff"
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.map {
  width: 800px;
  height: 600px;
  position: relative;
}
.tabTime-style {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.activeTab-style {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  background-color: #66bdff;
  text-align: center;
  line-height: 30px;
}
</style>
